Position

Positioning utilities give you the ability to change the position property of an element.

RelativeRelativedev ready

Preview

Code

<div class="slds-is-relative">
  <div style="position:absolute;top:1rem;left:1rem;border:1px solid red;background:#f4f6f9;">An absolutely positioned element is positioned relative to the nearest positioned ancestor.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.slds-is-relative can be used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout.

StaticStaticdev ready

Preview

Code

<div class="slds-is-static">
  <div style="position:absolute;top:1rem;left:1rem;border:1px solid red;background:#f4f6f9;">An absolutely positioned element is positioned relative to the nearest positioned ancestor.</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.slds-is-static resets positioning of element back to normal behavior

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-is-relative
Applied to:

any element

Outcome:

Used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout.

Required:

No, optional element or modifier

Comments:

--

.slds-is-static
Applied to:

any element

Outcome:

Reset positioning back to normal behavior

Required:

No, optional element or modifier

Comments:

--